<!-- 产品单耗分析 -->
<template>
  <div class="productUnitAnalysis">
    <div class='operate card'>
      <div>
        <el-date-picker style="width:150px" v-model="s_time" :editable='false' :clearable="false" :type='d_type' :format="v_type" :value-format='v_type' :picker-options="pickerOptions" placeholder="选择日期时间"> </el-date-picker>
      </div>
      <div class='hidden-xs-only'>
        <i class='el-icon-minus'></i>
      </div>
      <div>
        <el-tooltip content="查询时间跨度最大为31天" placement="top">
          <el-date-picker style="width:150px" v-model="e_time" :editable='false' :clearable="false" :type='d_type' :format="v_type" :value-format='v_type' :picker-options="pickerOptions" placeholder="选择日期时间"></el-date-picker>
        </el-tooltip>
      </div>
      <!-- <div>选择车间:</div> -->
      <div>
        <el-select style="width:150px" v-model="Workshop_value">
          <el-option v-for="item in Workshop" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" :disabled="!Workshop_value" @click='t_button'>查询</el-button>
      </div>
      <div class='export'>
        <el-tooltip content="导出" placement="top">
          <el-button type="" :disabled="!Workshop_value" @click='t_export'><i style="color:#0780EDfont-size:20px" class='iconfont icon-daochu'></i></el-button>
        </el-tooltip>
      </div>
    </div>
    <el-row class='card' :gutter="0">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <Mtitle title='产品单耗分析表'>
        </Mtitle>
        <el-table v-loading='tableData_01_loading' :data="tableData_01" :span-method="objectSpanMethod" border>
          <el-table-column align="center" prop="name" label="类别" width="200">
          </el-table-column>
          <el-table-column align="center" prop="a" label="生产线">
          </el-table-column>
          <el-table-column align="center" prop="b" label="综合单耗">
          </el-table-column>
          <el-table-column align="center" prop="c" label="生产日期">
          </el-table-column>
          <el-table-column align="center" prop="d" label="开始时间">
          </el-table-column>
          <el-table-column align="center" prop="e" label="结束时间">
          </el-table-column>
          <el-table-column align="center" prop="f" label="平均综合单耗">
          </el-table-column>
          <el-table-column align="center" prop="g" label="综合单耗差异度">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row class='card' :gutter="0">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <Mtitle title='生产过程负荷曲线'>
        </Mtitle>
        <ecline v-no-data='line_data_no_data' v-loading="line_data_loading" style="height:400px" unit='kWh' :ecdata='line_data' width='100%' height='100%'></ecline>
      </el-col>
    </el-row>
    <el-row class='card' :gutter="0">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <tb tableTitle='tb_0013' :tableData='tableData_02' v-loading="tableData_02_loading" style='margin-top:15px'></tb>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import day from "@/utils/day.js"
import Mtitle from '@/components/Mtitle'
import ecline from '@/components/echarts/ec_line'
import tb from '@/components/table'
export default {
  components: {
    Mtitle,
    tb,
    ecline
  },
  data() {
    return {
      tableData_01: [
        {          name: '区间最大综合单耗生产线',
          a: '--',
          b: '--',
          c: '--',
          d: '--',
          e: '--',
          f: '--',
          g: '--',
        },
        {          name: '区间最小综合单耗生产线',
          a: '--',
          b: '--',
          c: '--',
          d: '--',
          e: '--',
          f: '--',
          g: '--',        }
      ],
      line_data_no_data: false,
      tableData_02: [],
      line_data: [],
      line_data_loading: true,
      tableData_01_loading: true,
      tableData_02_loading: true,
      Workshop: [],
      Workshop_value: "",
      d_type: "date",
      s_time: "",
      e_time: "",
      v_type: "yyyy-MM-dd",
      // 日月年
      t_value: 2,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      export_s_time: '',
      export_e_time: '',
      export_Workshop_value: ''
    }
  },
  mounted() {
  },
  created() {
    // 初始化默认时间
    this.s_e = day.init_value(this.d_type)
    this.s_time = this.s_e.s
    this.e_time = this.s_e.e
    // 获取车间下拉列表
    this.export_s_time = this.s_time
    this.export_e_time = this.e_time
    // 查询企业下的产品
    this.findProductInfoByCustId()
  },
  methods: {
    // 查询企业下的产品
    findProductInfoByCustId() {
      let fd = new FormData()
      fd.append("custId", sessionStorage.getItem("custId"))
      this.$axios
        .post(this.Eelec + "/productConsumption/findProductInfoByCustId", fd)
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data && res.data.data.length) {
              this.Workshop_value = this.export_Workshop_value = res.data.data[0].id
              this.Workshop = res.data.data
              // 根据时间区间查看生产线列表和负荷曲线
              this.queryProduceLineList()
              // 根据时间区间查看单耗分析表
              this.queryConsumptionAnalysisTable()
            } else {
              this.line_data_no_data = true
              this.line_data_loading = false
              this.tableData_01_loading = false
              this.tableData_02_loading = false
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 根据时间区间查看生产线列表和负荷曲线
    queryProduceLineList() {
      this.$axios
        .post(this.Eelec + "/productConsumption/queryProduceLineList", {
          productId: this.Workshop_value,
          startDate: this.s_time,
          endDate: this.e_time
        })
        .then(res => {
          this.tableData_02_loading = false
          this.line_data_loading = false
          if (res.data.code === 200) {
            if (res.data.data === null) {
              this.line_data = []
              this.tableData_02 = []
            }
            if (res.data.data && res.data.data.produceLoadRespList && res.data.data.produceLoadRespList.length) {
              this.line_data = res.data.data.produceLoadRespList.map((item, index) => {
                return {
                  name: item.name,
                  value: item.rmiSamplDataRespList.dataResp
                }
              })
            } else {
              this.line_data_no_data = true
              this.line_data = []
            }
            if (res.data.data.produceLineRespList.length) {
              this.tableData_02 = res.data.data.produceLineRespList
            }
            else {
              this.tableData_02 = []
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 根据时间区间查看单耗分析表
    queryConsumptionAnalysisTable() {
      this.$axios
        .post(
          this.Eelec + "/productConsumption/queryConsumptionAnalysisTable",
          {
            productId: this.Workshop_value,
            startDate: this.s_time,
            endDate: this.e_time
          }
        )
        .then(res => {
          this.tableData_01_loading = false
          if (res.data.code === 200) {
            if (res.data.data !== null) {
              this.tableData_01[0].a = res.data.data.maxLineName
              this.tableData_01[1].a = res.data.data.minLineName
              this.tableData_01[0].b = res.data.data.maxConsumption
              this.tableData_01[1].b = res.data.data.minConsumption
              this.tableData_01[0].c = res.data.data.maxProduceTime.substr(0, 10)
              this.tableData_01[1].c = res.data.data.minProduceTime.substr(0, 10)
              this.tableData_01[0].d = res.data.data.maxStartTime.substr(11, 5)
              this.tableData_01[1].d = res.data.data.minStartTime.substr(11, 5)
              this.tableData_01[0].e = res.data.data.maxEndTime.substr(11, 5)
              this.tableData_01[1].e = res.data.data.minEndTime.substr(11, 5)
              this.tableData_01[0].f = res.data.data.avgConsumption
              this.tableData_01[1].f = res.data.data.avgConsumption
              this.tableData_01[0].g = res.data.data.differenceDegree
              this.tableData_01[1].g = res.data.data.differenceDegree
            } else {
              this.tableData_01 = [
                {                  name: '区间最大综合单耗生产线',
                  a: '--',
                  b: '--',
                  c: '--',
                  d: '--',
                  e: '--',
                  f: '--',
                  g: '--',
                },
                {                  name: '区间最小综合单耗生产线',
                  a: '--',
                  b: '--',
                  c: '--',
                  d: '--',
                  e: '--',
                  f: '--',
                  g: '--',                }
              ]
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 7 || columnIndex === 6) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    t_export() {
      this.$axios.post(this.Eelec + '/productConsumption/productConsumptionExport', {
        "endDate": this.export_e_time,
        "productId": this.export_Workshop_value,
        "startDate": this.export_s_time,
      }).then(res => {
        if (res.data.code === 200) {
          if (res.data.data != null) {
            window.location.href = res.data.data
            this.$message({
              message: "导出成功",
              type: "success"
            })
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 点击查询
    t_button() {
      day
        .s_e(this.s_time, this.e_time, this.t_value)
        .then(() => {
          this.export_s_time = this.s_time
          this.export_e_time = this.e_time
          this.export_Workshop_value = this.Workshop_value
          console.log("可以调方法了")
          this.line_data_loading = true,
            this.tableData_01_loading = true,
            this.tableData_02_loading = true,
            // 根据时间区间查看生产线列表和负荷曲线
            this.queryProduceLineList()
          // 根据时间区间查看单耗分析表
          this.queryConsumptionAnalysisTable()
        })
        .catch(() => { })
    },
  }
}
</script>
 <style scoped lang='scss'>
</style>
